<template>
    <div class="loading" v-if="loading" v-loading="loading"></div>
    <el-empty v-if="!data.length && !loading" description="暂无数据" />
    <template v-for="item in data" :key="item">
        <div :style="{ '--level': level, '--bg': level == 1 ? '#DEEBFF' : '#F2F6FC' }"
        :class="{ row: true, bg: collection.includes(item.specificationId) || bg }">
            <div class="col">
                <div class="icon">
                    <template v-if="item.children.length">
                        <el-icon v-if="!collection.includes(item.specificationId)" @click="collection.push(item.specificationId)">
                            <Plus />
                        </el-icon>
                        <el-icon v-else @click="collection=collection.filter(i => i != item.specificationId)">
                            <Minus />
                        </el-icon>
                    </template>
                </div>
                {{ item.name }}
            </div>
            <div class="col">
                {{ item.sortOrder }}
            </div>
            <div class="col">
                <el-tag :type="item.status == 1 ? 'primary' : 'info'">
                    {{ item.status == 1 ? '显示' : '禁用' }}
                </el-tag>
            </div>
        </div>
        <Tree v-if="item.children && collection.includes(item.specificationId)" :data="item.children" :bg="true" :level="level+1"></Tree>
    </template>
</template>

<script setup>
import { ref } from "vue";
defineProps({
    data: {
        type: Array,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    },
    level:{
        type: Number,
        default: 1
    },
    bg: {
        type: Boolean,
    }
});
const collection = ref([]);
</script>

<style lang="scss" scoped>
$border: 1px solid #E1E6ED;

.loading {
    height: 300px;
}

.row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    .col {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: $border;
        border-right: $border;

        .el-icon {
            border: $border;
            font-size: 12px;
            color: black;
            padding: 2px;
        }

        .icon {
            width: 20px;
            margin-right: 8px;
        }
    }

    >.col:first-child {
        padding-left: calc(var(--level) * 16px + 10%);
        text-align: left;
        justify-content: flex-start;
        text-wrap: nowrap;
        user-select: none;
    }

    >.col:last-child {
        border-right: none;
    }
}
.bg{
    background: var(--bg);
}
</style>